const slides = document.querySelectorAll(".slide");
const ctl = document.querySelectorAll(".slider__control");
const numOfSlides = slides.length,
  slidingAT = 1300;
let slidingBlocked = false;

slides.forEach((slide, index) => {
  const i = index + 1;
  slide.classList.add(`slide-${i}`);
  slide.setAttribute("data-slide", i);
});

ctl.forEach((control) => {
  control.addEventListener("click", controlClickHandler);
});

// 控制点击处理函数
function controlClickHandler() {
  // 如果滑动被阻止，则返回
  if (slidingBlocked) return;
  // 滑动被阻止
  slidingBlocked = true;
  // 获取当前点击的控件
  const $control = this;
  // 判断是否向右滑动
  const isRight = $control.classList.contains("m--right");
  // 获取当前激活的幻灯片
  const curActive = document.querySelector(".slide.s--active");
  // 获取当前激活的幻灯片的索引
  let index = +curActive.dataset.slide;
  // 如果向右滑动，索引加1，否则索引减1
  isRight ? index++ : index--;
  // 如果索引小于1，则设置为最后一张幻灯片
  if (index < 1) index = numOfSlides;
  // 如果索引大于最后一张幻灯片，则设置为第一张幻灯片
  if (index > numOfSlides) index = 1;
  // 获取新的激活的幻灯片
  const newActive = document.querySelector(`.slide-${index}`);
  // 给当前点击的控件添加旋转动画
  $control.classList.add("a--rotation");
  // 移除当前激活的幻灯片的激活和前一个激活的类
  curActive.classList.remove("s--active", "s--active-prev");
  // 移除前一个激活的幻灯片的激活前一个的类
  document.querySelector(".slide.s--prev").classList.remove("s--prev");
  // 给新的激活的幻灯片添加激活和前一个激活的类
  newActive.classList.add("s--active");
  // 如果不是向右滑动，则给新的激活的幻灯片添加激活前一个的类
  if (!isRight) newActive.classList.add("s--active-prev");

  // 获取前一个幻灯片的索引
  let prevIndex = index - 1;
  // 如果前一个幻灯片的索引小于1，则设置为最后一张幻灯片
  if (prevIndex < 1) prevIndex = numOfSlides;
  // 给前一个幻灯片添加激活前一个的类
  document.querySelector(`.slide-${prevIndex}`).classList.add("s--prev");
  // 在滑动动画结束后，移除旋转动画，并解除滑动阻止
  setTimeout(function () {
    $control.classList.remove("a--rotation");
    slidingBlocked = false;
  }, slidingAT * 0.75);
}
